<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryChooseItineraryTypeManagedBean.initView}"/>
        <p:menubar model="#{itineraryChooseItineraryTypeManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryChooseItineraryTypeManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">
        <f:view beforePhase="#{reservationManagerBean.init}"/>
        <h:form id="formMain">
            <h:selectOneMenu id="selectedLocale" value="#{indexManagerBean.selectedLocale}" >
                <f:selectItem id="item1" itemLabel="English (US)" itemValue="en_US" />
                <f:selectItem id="item2" itemLabel="English (Singapore)" itemValue="en_SG" />
                <f:selectItem id="item3" itemLabel="Chinese (China)" itemValue="zh_CN" />
                <f:selectItem id="item4" itemLabel="Malay (Malaysia)" itemValue="ms_MY" />
                <p:ajax update="VisitorSelectDate VisitorIndicatePeople VisitorSelectDateButton VisitorSelectTimeslot VisitorGenerateTableButton VisitorSelecttableButton VisitorSelecttableButton2 VisitorSelectTableType TableName Table Description TablePicture VisitorChooseNumberofTable table" listener="#{indexManagerBean.selectedLocaleValueChangeListener}" />
            </h:selectOneMenu>

            <p:panel id="panel" style="width:850px">
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
                <p:messages />
                <h:panelGrid>
                    <h:outputText id="VisitorSelectDate" value="#{bundle['visitor.select.date']}" />
                    <p:calendar value="#{reservationManagerBean.reservation.dateReserved}"/>
                    <h:outputText id="VisitorIndicatePeople" value="#{bundle['visitor.indicate.people']}" />
                    <h:selectOneMenu value="#{reservationManagerBean.reservation.noOfPeople}" id="noOfPeople">
                        <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                        <f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
                        <f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
                        <f:selectItem itemLabel="4" itemValue="4"></f:selectItem>
                        <f:selectItem itemLabel="5" itemValue="5"></f:selectItem>
                        <f:selectItem itemLabel="6" itemValue="6"></f:selectItem>
                        <f:selectItem itemLabel="7" itemValue="7"></f:selectItem>
                        <f:selectItem itemLabel="8" itemValue="8"></f:selectItem>
                        <f:selectItem itemLabel="9" itemValue="9"></f:selectItem>
                        <f:selectItem itemLabel="10" itemValue="10"></f:selectItem>
                        <f:selectItem itemLabel="11" itemValue="11"></f:selectItem>
                        <f:selectItem itemLabel="12" itemValue="12"></f:selectItem>
                        <f:selectItem itemLabel="13" itemValue="13"></f:selectItem>
                        <f:selectItem itemLabel="14" itemValue="14"></f:selectItem>
                        <f:selectItem itemLabel="15" itemValue="15"></f:selectItem>
                        <f:selectItem itemLabel="16" itemValue="16"></f:selectItem>
                        <f:selectItem itemLabel="17" itemValue="17"></f:selectItem>
                        <f:selectItem itemLabel="18" itemValue="18"></f:selectItem> 
                        <f:selectItem itemLabel="19" itemValue="19"></f:selectItem>
                        <f:selectItem itemLabel="20" itemValue="20"></f:selectItem>
                    </h:selectOneMenu>
                    <p:commandButton id="VisitorSelectDateButton" value="#{bundle['visitor.selectdate.button']}" actionListener="#{reservationManagerBean.initTableList}"  ajax="true" update="panel"/>
                </h:panelGrid>

                <h:panelGrid id="timeslot">
                    <h:outputText id="VisitorSelectTimeslot" value="#{bundle['visitor.select.timeslot']}" />
                    <h:selectOneMenu value="#{reservationManagerBean.timeInput}" disabled="#{reservationManagerBean.availSlot.size() == 0}">  
                        <f:selectItems value="#{reservationManagerBean.availSlot}" />                                    
                    </h:selectOneMenu>  
                    <p:commandButton id="VisitorGenerateTableButton" value="#{bundle['visitor.generatetable.button']}" actionListener="#{reservationManagerBean.chooseTableType}" ajax="true" update="panel"/>
                </h:panelGrid>

                <h:panelGrid id="table" rendered="#{reservationManagerBean.createTable == true}">
                    <h:outputText id="VisitorSelectTableType" value="#{bundle['visitor.select.tableType']}" />
                    <p:dataTable id="test" var="table" value="#{reservationManagerBean.tableList}" 
                                 rowIndexVar="row" >

                        <p:column headerText="#{bundle['visitor.select.tableName']}" style="width:100px;">
                            <h:outputText value="#{table.name}" />
                        </p:column>
                        <p:column headerText="#{bundle['visitor.select.tablePicture']}">
                            <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{table.imageURL}" width="150" height="120"></h:graphicImage>
                        </p:column>
                        <p:column headerText="#{bundle['visitor.select.tableDescription']}" style="width:300px;">
                            <h:outputText value="#{table.description}" />
                        </p:column>
                        <p:column headerText="#{bundle['visitor.select.NoTable']}">
                            <h:selectOneMenu value="#{reservationManagerBean.index}">
                                <f:selectItems value="#{reservationManagerBean.quantityAvail[reservationManagerBean.getTablePos(table.id)]}"/>
                            </h:selectOneMenu>
                        </p:column>
                    </p:dataTable>                       
                </h:panelGrid>
                <p:commandButton id="VisitorSelecttableButton" value="#{bundle['visitor.selecttable.button']}" actionListener="#{reservationManagerBean.confirmTableTypeWithoutMeal}" ajax="true" update="panel"/>
                <p:commandButton id="VisitorSelecttableButton2" value="#{bundle['visitor.selecttable.button2']}" actionListener="#{reservationManagerBean.confirmTableTypeWithMeal}" ajax="true" update="panel"/>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>